<template>
  <div class="ft">
    <div id="xi">
      <mt-header title="新增收货地址" class="inmoder" fixed id="po">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      </mt-header>
    </div>

    <div id="app" class="ht">
      <mt-field
        type="text"
        placeholder="您的名字"
        label="收件人"
        disableClear
        v-model="name"
        :state="nameState"
        @blur.native.capture="checkName"
      ></mt-field>
      <mt-field
        type="text"
        placeholder="配送员联系您的手机号"
        label="手机号"
        disableClear
        :attr="{ maxlength: '11' }"
        style="border-bottom: 1px solid #d9d9d9"
        v-model="phone"
        :state="phoneState"
        @blur.native.capture="checkphone"
      ></mt-field>
      <mt-field
        type="text"
        placeholder="省_市_区"
        label="收货地址"
        disableClear
        v-model="address"
        :state="addressState"
        @blur.native.capture="checkAddress"
      ></mt-field>
      <mt-field
        type="text"
        placeholder="门牌号等(例如: 10栋1001号)"
        label="详细地址:"
        disableClear
        v-model="number"
        :state="numberState"
        @blur.native.capture="checkNumber"
      ></mt-field>
    </div>
    <mt-button
      type="primary"
      size="large"
      style="margin-top: 40px"
      @click="samForm"
      id="btn"
      >保存</mt-button
    >
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      uid: '',
      name: "",
      nameState: "",
      phone: "",
      phoneState: "",
      address: "",
      addressState: "",
      number: "",
      numberState: "",
    };
  },

  methods: {
    checkName() {
      let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
    checkphone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phoneState = "success";
        return true;
      } else {
        this.phoneState = "error";
        return false;
      }
    },
    checkAddress() {
      let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
      if (reg.test(this.address)) {
        this.addressState = "success";
        return true;
      } else {
        this.addressState = "error";
        return false;
      }
    },
    checkNumber() {
      let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
      if (reg.test(this.number)) {
        this.numberState = "success";
        return true;
      } else {
        this.numberState = "error";
        return false;
      }
    },
    samForm() {
      if (
        this.checkName() &&
        this.checkAddress() &&
        this.checkphone() &&
        this.checkNumber()
      ) {
        console.log("验证成功");
        this.uid=this.$store.state.uid
        if (this.uid) {
          this.axios
            .post(
              "/user/readds",
              `uid=${this.uid}&name=${this.name}&phone=${this.phone}&regres=${this.address}&addres=${this.number}`
            )
            .then((res) => {
              console.log(res);
              MessageBox.alert("保存成功");
              window.location.href='/myreadsgl'
            });
        }
      }
    },
  },
};
</script>

<style scoped>
.pi {
  border: 0;
  border-bottom: 0 solid black;
  background: 0;
  outline: none;
}
p {
  font-weight: bold;
}
.ft {
  height: 170vw;
  width: 100vw;
  background-color: rgb(242, 242, 242);
}
input {
  padding-left: 10vw;
  text-align: left;
}
.pu {
  padding-left: 6vw;
  text-align: left;
}
#po {
  background-color: #fff;
  color: #000;
  font-size: 5vw;
  font-weight: bold;
}
#xi {
  margin-bottom: 13vw;
  display: flex;
}
.ht {
  text-align: left;
  background-color: #fff;
}
.yp {
  width: 90vw;
}
</style>
